/*
 * @Author: tomystery 
 * @Date: 2018-05-09 17:44:00 
 * @Last Modified by: t
 * @Last Modified time: 2018-06-23 15:21:45
 */
import React from 'react'
import PageTitle from 'component/page-title/index.jsx'
import { Link } from 'react-router-dom'
import Statstic from 'service/statstic-service.jsx'
import MUtil from 'util/mm.jsx'
const _mm = new MUtil()
import './index.scss'
const _statstic = new Statstic()

class Home extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            userCount: '_',
            productCount: '_',
            orderCount: '_'
        }
    }

    componentDidMount() {
        this.loadCount();
    }
    loadCount() {
        _statstic.getHomeCount().then((res) => {
           
            this.setState(res)
        }, (err) => {
            _mm.errTips(err)
        })

    }

    render() {
        return (
            <div id='page-wrapper'>

                <PageTitle title='首页' />
                <div className='row'>
                    <div className='col-md-4'>
                        <Link className='color-box brown' to='/user'>
                            <p className='count'>{this.state.userCount}</p>
                            <p className='desc'>
                                <i className='fa fa-user-o'></i>
                                <span>用户总数</span>
                            </p>
                        </Link>
                    </div>
                    <div className='col-md-4'>
                        <Link className='color-box green' to='/product'>
                            <p className='count'>{this.state.productCount}</p>
                            <p className='desc'>
                                <i className='fa fa-list'></i>
                                <span>商品总数</span>
                            </p>
                        </Link>
                    </div>
                    <div className='col-md-4'>
                        <Link className='color-box blue' to='/order'>
                            <p className='count'>{this.state.orderCount}</p>
                            <p className='desc'>
                                <i className='fa fa-user-o'></i>
                                <span>订单总数</span>
                            </p>
                        </Link>
                    </div>
                </div>
            </div>

        )
    }
}

export default Home